<template>
  <div class="rule-create-container">
    <div class="header-title">
      <h2>自动组卷</h2>
      <p class="subtitle">根据规则自动生成试卷</p>
    </div>

    <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="120px" class="rule-form">
      <!-- 基本信息区域 -->
      <div class="section-title">基本信息</div>
      <el-form-item label="试卷名称" prop="paperName">
        <el-input v-model="ruleForm.paperName" placeholder="请输入试卷名称"></el-input>
      </el-form-item>

      <el-form-item label="选择学科" prop="subjectId">
        <el-select v-model="ruleForm.subjectId" placeholder="请选择学科" @change="handleSubjectChange" style="width: 100%">
          <el-option v-for="subject in subjects" :key="subject.id" :label="subject.name" :value="subject.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="试卷难度" prop="difficulty">
        <el-select v-model="ruleForm.difficulty" placeholder="请选择试卷难度" style="width: 100%">
          <el-option label="简单" value="easy"></el-option>
          <el-option label="中等" value="medium"></el-option>
          <el-option label="困难" value="hard"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="生成套数" prop="paperCount">
        <el-input-number v-model="ruleForm.paperCount" :min="1" :max="10" controls-position="right"></el-input-number>
        <span class="form-hint">最多可生成10套试卷</span>
      </el-form-item>

      <el-form-item label="题目重复率" prop="repeatRate">
        <el-slider v-model="ruleForm.repeatRate" :marks="{0: '0%', 25: '25%'}"  max="25"></el-slider>
        <!-- <span class="form-hint">题目在多套试卷间的重复比例，0%表示完全不重复</span>  -->
      </el-form-item>

      <!-- 题型选择区域 -->
      <div class="section-title">题型设置</div>
      <el-alert
        title="请设置每种题型的数量和分值"
        type="info"
        :closable="false"
        class="alert-info"
      ></el-alert>

      <el-form-item v-for="type in questionTypes" :key="type.value" :label="type.label">
        <div class="question-type-setting">
          <el-input-number 
            v-model="ruleForm.typeConfig[type.value].count" 
            :min="0" 
            :max="50" 
            size="small"
            controls-position="right"
            @change="calculateTotalScore"
          ></el-input-number>
          <span class="setting-label">题</span>
          <span class="setting-multiply">×</span>
          <el-input-number 
            v-model="ruleForm.typeConfig[type.value].score" 
            :min="1" 
            :max="20" 
            size="small"
            controls-position="right"
            @change="calculateTotalScore"
          ></el-input-number>
          <span class="setting-label">分</span>
          <span class="setting-equals">=</span>
          <span class="setting-total">{{ ruleForm.typeConfig[type.value].count * ruleForm.typeConfig[type.value].score }}分</span>
        </div>
      </el-form-item>

      <div class="total-score">
        <span>试卷总分：{{ totalScore }}分</span>
      </div>

      <!-- 题库选择区域 -->
      <div class="section-title">题库选择</div>
      <el-alert
        title="请选择从哪些题库中抽取题目"
        type="info"
        :closable="false"
        class="alert-info"
      ></el-alert>

      <el-form-item label="选择题库" prop="libraryIds">
        <el-checkbox-group v-model="ruleForm.libraryIds">
          <el-checkbox v-for="lib in libraries" :key="lib.id" :label="lib.id">
            {{ lib.name }} ({{ lib.count || 0 }}题)
          </el-checkbox>
        </el-checkbox-group>
        <div v-if="libraries.length === 0" class="empty-hint">
          当前学科下没有可用题库，请先选择学科
        </div>
      </el-form-item>

      <!-- 操作按钮 -->
      <div class="form-actions">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleGenerate" :loading="generating">生成试卷</el-button>
      </div>
    </el-form>

    <!-- 生成结果对话框 -->
    <el-dialog
      v-model="resultDialogVisible"
      title="试卷生成结果"
      width="60%"
    >
      <div v-if="generatedPapers.length > 0">
        <el-alert
          title="试卷生成成功，您可以查看或进一步编辑这些试卷"
          type="success"
          :closable="false"
          class="result-alert"
        ></el-alert>

        <el-table :data="generatedPapers" border style="width: 100%; margin-top: 20px;">
          <el-table-column prop="paperName" label="试卷名称"></el-table-column>
          <el-table-column prop="questionCount" label="题目数量"></el-table-column>
          <el-table-column prop="totalScore" label="总分"></el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button size="small" type="primary" @click="viewPaper(scope.row)">查看</el-button>
              <el-button size="small" type="success" @click="editPaper(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else class="generation-error">
        <el-alert
          title="试卷生成失败，请检查选择的题库是否有足够的题目"
          type="error"
          :closable="false"
        ></el-alert>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="resultDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="goToPaperList">前往试卷列表</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { getSubjects } from '../../../api/subject';
import { getLibrariesBySubject } from '../../../api/library';
import { getLibraryQuestions } from '../../../api/question';
import { savePaper } from '../../../api/paper';

// 路由
const router = useRouter();

// 题型定义
const questionTypes = [
  { value: 'SINGLE_CHOICE', label: '单选题' },
  { value: 'MULTIPLE_CHOICE', label: '多选题' },
  { value: 'TRUE_FALSE', label: '判断题' },
  { value: 'FILL_BLANK', label: '填空题' },
  { value: 'SHORT_ANSWER', label: '简答题' },
  { value: 'READING', label: '阅读理解' }
];

// 表单数据
const ruleForm = reactive({
  paperName: '',
  subjectId: '',
  difficulty: 'medium',
  paperCount: 1,
  repeatRate: 25,
  typeConfig: {
    SINGLE_CHOICE: { count: 5, score: 1 },
    MULTIPLE_CHOICE: { count: 3, score: 2 },
    TRUE_FALSE: { count: 5, score: 1 },
    FILL_BLANK: { count: 3, score: 5 },
    SHORT_ANSWER: { count: 2, score: 6 },
    READING: { count: 1, score: 10 }
  },
  libraryIds: []
});

// 表单验证规则
const rules = {
  paperName: [
    { required: true, message: '请输入试卷名称', trigger: 'blur' }
  ],
  subjectId: [
    { required: true, message: '请选择学科', trigger: 'change' }
  ],
  libraryIds: [
    { type: 'array', required: true, message: '请至少选择一个题库', trigger: 'change' }
  ]
};

// 引用和状态
const ruleFormRef = ref(null);
const generating = ref(false);
const subjects = ref([]);
const libraries = ref([]);
const resultDialogVisible = ref(false);
const generatedPapers = ref([]);

// 计算总分
const totalScore = computed(() => {
  let total = 0;
  Object.values(ruleForm.typeConfig).forEach(config => {
    total += config.count * config.score;
  });
  return total;
});

// 计算总分的方法（用于手动触发计算）
const calculateTotalScore = () => {
  // 只是用来触发 totalScore 的重新计算
  // 实际计算由 computed 属性完成
};

// 获取学科列表
const fetchSubjects = async () => {
  try {
    const userId = JSON.parse(localStorage.getItem('user')).id;
    const res = await getSubjects(userId, 1, 100);
    subjects.value = res.data.list;
  } catch (error) {
    ElMessage.error('获取学科列表失败');
  }
};

// 处理学科变更
const handleSubjectChange = async () => {
  libraries.value = [];
  ruleForm.libraryIds = [];

  if (!ruleForm.subjectId) return;
  
  try {
    const res = await getLibrariesBySubject(ruleForm.subjectId, 1, 100);
    libraries.value = res.data.list.map(lib => ({
      ...lib,
      count: 0
    }));
    
    // 获取每个题库的题目数量
    for (const lib of libraries.value) {
      try {
        const questionsRes = await getLibraryQuestions(lib.id);
        lib.count = questionsRes.data ? questionsRes.data.length : 0;
      } catch (error) {
        console.error(`获取题库${lib.id}的题目数量失败:`, error);
      }
    }
  } catch (error) {
    ElMessage.error('获取题库列表失败');
  }
};

// 生成试卷
const handleGenerate = async () => {
  if (!ruleFormRef.value) return;

  try {
    await ruleFormRef.value.validate();
    
    // 检查题型设置是否合理
    const totalQuestions = Object.values(ruleForm.typeConfig).reduce((sum, config) => sum + config.count, 0);
    if (totalQuestions === 0) {
      ElMessage.warning('请至少设置一种题型的数量大于0');
      return;
    }
    
    // 检查是否选择了题库
    if (ruleForm.libraryIds.length === 0) {
      ElMessage.warning('请至少选择一个题库');
      return;
    }
    
    generating.value = true;
    // 获取所有选中题库的题目
    const allQuestions = {};
    // 按难度和题型分类题目
    const questionsByDifficultyAndType = {
      // 难度1(简单)
      1: {},
      // 难度2(中等)
      2: {},
      // 难度3(困难)
      3: {}
    };
    
    // 初始化分类结构
    for (const typeObj of questionTypes) {
      const type = typeObj.value;
      allQuestions[type] = [];
      questionsByDifficultyAndType[1][type] = [];
      questionsByDifficultyAndType[2][type] = [];
      questionsByDifficultyAndType[3][type] = [];
    }
    
    // 从每个题库获取题目并按难度和类型分类
    for (const libId of ruleForm.libraryIds) {
      try {
        const res = await getLibraryQuestions(libId);
        if (res.data && res.data.length > 0) {
          // 按题型和难度分类
          res.data.forEach(question => {
            if (allQuestions[question.questionType]) {
              // 添加到总题目集合
              allQuestions[question.questionType].push(question);
              
              // 按难度分类
              const difficulty = question.difficulty || 2; // 默认中等难度
              if (difficulty >= 1 && difficulty <= 3) {
                questionsByDifficultyAndType[difficulty][question.questionType].push(question);
              } else {
                // 难度不在范围内，默认归为中等
                questionsByDifficultyAndType[2][question.questionType].push(question);
              }
            }
          });
        }
      } catch (error) {
        console.error(`获取题库${libId}的题目失败:`, error);
      }
    }
    
    // 根据试卷难度设置不同难度题目的比例
    let easyRatio, mediumRatio, hardRatio;
    
    switch (ruleForm.difficulty) {
      case 'easy':
        // 简单试卷：60%简单题，30%中等题，10%困难题
        easyRatio = 0.6;
        mediumRatio = 0.3;
        hardRatio = 0.1;
        break;
      case 'medium':
        // 中等试卷：30%简单题，50%中等题，20%困难题
        easyRatio = 0.3;
        mediumRatio = 0.5;
        hardRatio = 0.2;
        break;
      case 'hard':
        // 困难试卷：10%简单题，30%中等题，60%困难题
        easyRatio = 0.1;
        mediumRatio = 0.3;
        hardRatio = 0.6;
        break;
      default:
        // 默认中等
        easyRatio = 0.3;
        mediumRatio = 0.5;
        hardRatio = 0.2;
    }
    
    // 检查每种题型是否有足够的题目
    let sufficient = true;
    for (const type in ruleForm.typeConfig) {
      const required = ruleForm.typeConfig[type].count;
      if (required > 0) {
        const available = allQuestions[type] ? allQuestions[type].length : 0;
        if (available < required) {
          ElMessage.warning(`${questionTypes.find(t => t.value === type)?.label || type}数量不足，需要${required}题，但只有${available}题`);
          sufficient = false;
        }
      }
    }
    
    if (!sufficient) {
      generating.value = false;
      return;
    }
    
    // 生成指定套数的试卷
    generatedPapers.value = [];
    
    for (let i = 0; i < ruleForm.paperCount; i++) {
      // 为每套试卷选择题目
      let paperQuestions = [];
      let fixedQuestions = []; // 固定的题目（用于实现题目重复率）
      
      // 第一套试卷按难度比例选择
      if (i === 0) {
        for (const type in ruleForm.typeConfig) {
          const totalCount = ruleForm.typeConfig[type].count;
          if (totalCount > 0) {
            // 根据难度比例计算各难度需要的题目数
            let easyCount = Math.round(totalCount * easyRatio);
            let mediumCount = Math.round(totalCount * mediumRatio);
            let hardCount = totalCount - easyCount - mediumCount;
            
            // 确保数量不为负
            easyCount = Math.max(0, easyCount);
            mediumCount = Math.max(0, mediumCount);
            hardCount = Math.max(0, hardCount);
            
            // 调整数量，确保总和等于需要的题目数
            const sum = easyCount + mediumCount + hardCount;
            if (sum < totalCount) {
              // 如果总和少了，增加中等难度题目数
              mediumCount += (totalCount - sum);
            } else if (sum > totalCount) {
              // 如果总和多了，按优先级减少
              if (hardCount > 0) {
                const diff = Math.min(hardCount, sum - totalCount);
                hardCount -= diff;
                if (hardCount === 0 && (sum - totalCount - diff) > 0) {
                  const remainingDiff = sum - totalCount - diff;
                  mediumCount = Math.max(0, mediumCount - remainingDiff);
                }
              } else if (mediumCount > 0) {
                mediumCount = Math.max(0, mediumCount - (sum - totalCount));
              } else {
                easyCount = Math.max(0, easyCount - (sum - totalCount));
              }
            }
            
            // 检查每个难度级别是否有足够的题目
            let actualEasyCount = Math.min(easyCount, questionsByDifficultyAndType[1][type].length);
            let actualMediumCount = Math.min(mediumCount, questionsByDifficultyAndType[2][type].length);
            let actualHardCount = Math.min(hardCount, questionsByDifficultyAndType[3][type].length);
            
            // 如果某个难度级别题目不足，尝试从其他难度补充
            if (actualEasyCount < easyCount) {
              const diff = easyCount - actualEasyCount;
              // 优先从中等难度补充
              const extraMedium = Math.min(diff, questionsByDifficultyAndType[2][type].length - actualMediumCount);
              actualMediumCount += extraMedium;
              
              // 如果还不够，从困难补充
              if (extraMedium < diff) {
                actualHardCount += Math.min(diff - extraMedium, questionsByDifficultyAndType[3][type].length - actualHardCount);
              }
            }
            
            if (actualMediumCount < mediumCount) {
              const diff = mediumCount - actualMediumCount;
              // 优先从简单难度补充
              const extraEasy = Math.min(diff, questionsByDifficultyAndType[1][type].length - actualEasyCount);
              actualEasyCount += extraEasy;
              
              // 如果还不够，从困难补充
              if (extraEasy < diff) {
                actualHardCount += Math.min(diff - extraEasy, questionsByDifficultyAndType[3][type].length - actualHardCount);
              }
            }
            
            if (actualHardCount < hardCount) {
              const diff = hardCount - actualHardCount;
              // 优先从中等难度补充
              const extraMedium = Math.min(diff, questionsByDifficultyAndType[2][type].length - actualMediumCount);
              actualMediumCount += extraMedium;
              
              // 如果还不够，从简单补充
              if (extraMedium < diff) {
                actualEasyCount += Math.min(diff - extraMedium, questionsByDifficultyAndType[1][type].length - actualEasyCount);
              }
            }
            
            // 最终检查是否能满足总数需求
            const actualTotal = actualEasyCount + actualMediumCount + actualHardCount;
            if (actualTotal < totalCount) {
              ElMessage.warning(`${questionTypes.find(t => t.value === type)?.label || type}可用题目不足，需要${totalCount}题，但只能选出${actualTotal}题`);
              sufficient = false;
              break;
            }
            
            // 随机抽取题目
            const selectedEasy = shuffleAndSlice(questionsByDifficultyAndType[1][type], actualEasyCount);
            const selectedMedium = shuffleAndSlice(questionsByDifficultyAndType[2][type], actualMediumCount);
            const selectedHard = shuffleAndSlice(questionsByDifficultyAndType[3][type], actualHardCount);
            
            // 合并所有难度的题目
            const typeQuestions = [...selectedEasy, ...selectedMedium, ...selectedHard];
            paperQuestions = [...paperQuestions, ...typeQuestions];
          }
        }
        
        // 保存第一套试卷的题目作为固定题目基础
        fixedQuestions = [...paperQuestions];
      } else {
        // 后续试卷根据重复率选择题目
        const repeatCount = Math.floor(fixedQuestions.length * (ruleForm.repeatRate / 100));
        const shuffledFixed = [...fixedQuestions].sort(() => 0.5 - Math.random());
        const repeatedQuestions = shuffledFixed.slice(0, repeatCount);
        
        // 获取已选择的重复题目ID
        const repeatedIds = repeatedQuestions.map(q => q.id);
        
        // 按题型计算需要新选的题目数量
        for (const type in ruleForm.typeConfig) {
          const totalNeeded = ruleForm.typeConfig[type].count;
          // 计算该类型已重复的题目
          const alreadyRepeated = repeatedQuestions.filter(q => q.questionType === type).length;
          // 还需要选择的数量
          const needToSelect = totalNeeded - alreadyRepeated;
          
          if (needToSelect > 0) {
            // 根据难度比例计算各难度需要的题目数
            let easyCount = Math.round(needToSelect * easyRatio);
            let mediumCount = Math.round(needToSelect * mediumRatio);
            let hardCount = needToSelect - easyCount - mediumCount;
            
            // 确保数量不为负
            easyCount = Math.max(0, easyCount);
            mediumCount = Math.max(0, mediumCount);
            hardCount = Math.max(0, hardCount);
            
            // 调整数量，确保总和等于需要的题目数
            const sum = easyCount + mediumCount + hardCount;
            if (sum !== needToSelect) {
              if (sum < needToSelect) {
                mediumCount += (needToSelect - sum);
              } else {
                if (hardCount > 0) {
                  hardCount -= Math.min(hardCount, sum - needToSelect);
                } else if (mediumCount > 0) {
                  mediumCount -= Math.min(mediumCount, sum - needToSelect);
                } else {
                  easyCount -= Math.min(easyCount, sum - needToSelect);
                }
              }
            }
            
            // 排除已选的题目
            const availableEasy = questionsByDifficultyAndType[1][type].filter(q => !repeatedIds.includes(q.id));
            const availableMedium = questionsByDifficultyAndType[2][type].filter(q => !repeatedIds.includes(q.id));
            const availableHard = questionsByDifficultyAndType[3][type].filter(q => !repeatedIds.includes(q.id));
            
            // 检查每个难度级别是否有足够的题目
            let actualEasyCount = Math.min(easyCount, availableEasy.length);
            let actualMediumCount = Math.min(mediumCount, availableMedium.length);
            let actualHardCount = Math.min(hardCount, availableHard.length);
            
            // 如果某个难度级别题目不足，尝试从其他难度补充
            if (actualEasyCount < easyCount) {
              const diff = easyCount - actualEasyCount;
              const extraMedium = Math.min(diff, availableMedium.length - actualMediumCount);
              actualMediumCount += extraMedium;
              
              if (extraMedium < diff) {
                actualHardCount += Math.min(diff - extraMedium, availableHard.length - actualHardCount);
              }
            }
            
            if (actualMediumCount < mediumCount) {
              const diff = mediumCount - actualMediumCount;
              const extraEasy = Math.min(diff, availableEasy.length - actualEasyCount);
              actualEasyCount += extraEasy;
              
              if (extraEasy < diff) {
                actualHardCount += Math.min(diff - extraEasy, availableHard.length - actualHardCount);
              }
            }
            
            if (actualHardCount < hardCount) {
              const diff = hardCount - actualHardCount;
              const extraMedium = Math.min(diff, availableMedium.length - actualMediumCount);
              actualMediumCount += extraMedium;
              
              if (extraMedium < diff) {
                actualEasyCount += Math.min(diff - extraMedium, availableEasy.length - actualEasyCount);
              }
            }
            
            // 最终检查是否能满足总数需求
            const actualTotal = actualEasyCount + actualMediumCount + actualHardCount;
            if (actualTotal < needToSelect) {
              ElMessage.warning(`生成第${i+1}套试卷时，${questionTypes.find(t => t.value === type)?.label || type}可用题目不足`);
              sufficient = false;
              break;
            }
            
            // 随机抽取题目
            const selectedEasy = shuffleAndSlice(availableEasy, actualEasyCount);
            const selectedMedium = shuffleAndSlice(availableMedium, actualMediumCount);
            const selectedHard = shuffleAndSlice(availableHard, actualHardCount);
            
            // 合并所有难度的题目
            const newSelected = [...selectedEasy, ...selectedMedium, ...selectedHard];
            paperQuestions = [...paperQuestions, ...newSelected];
          }
        }
        
        // 合并重复的题目
        paperQuestions = [...repeatedQuestions, ...paperQuestions];
      }
      
      if (!sufficient) break;
      
      // 创建试卷对象
      const paper = {
        userId: JSON.parse(localStorage.getItem('user')).id,
        subjectId: ruleForm.subjectId,
        paperName: ruleForm.paperCount > 1 ? `${ruleForm.paperName}(${i+1})` : ruleForm.paperName,
        questionIds: paperQuestions.map(q => q.id).join(','),
        typeSet: Array.from(new Set(paperQuestions.map(q => q.questionType))).join(','),
        difficulty: ruleForm.difficulty,
        numberType: 'auto'
      };
      
      // 保存试卷
      try {
        const res = await savePaper(paper);
        if (res.code === 200) {
          generatedPapers.value.push({
            ...paper,
            paperId: res.data.paperId,
            questionCount: paperQuestions.length,
            totalScore: totalScore.value
          });
        } else {
          ElMessage.error(`保存第${i+1}套试卷失败: ${res.msg}`);
        }
      } catch (error) {
        console.error(`保存第${i+1}套试卷失败:`, error);
        ElMessage.error(`保存第${i+1}套试卷失败`);
      }
    }
    
    // 显示结果对话框
    resultDialogVisible.value = true;
  } catch (error) {
    if (error !== false) { // 非表单验证错误
      console.error('生成试卷失败:', error);
      ElMessage.error('生成试卷失败');
    }
  } finally {
    generating.value = false;
  }
};

// 辅助函数：随机打乱数组并截取指定数量的元素
const shuffleAndSlice = (array, count) => {
  return [...array].sort(() => 0.5 - Math.random()).slice(0, count);
};

// 取消
const handleCancel = () => {
  router.push('/paper/list');
};

// 查看试卷
const viewPaper = (paper) => {
  router.push({
    path: `/paper/view/${paper.paperId}`
  });
};

// 编辑试卷
const editPaper = (paper) => {
  router.push({
    path: `/create/manual`,
    query: {
      paperId: paper.paperId
    }
  });
};

// 前往试卷列表
const goToPaperList = () => {
  resultDialogVisible.value = false;
  router.push('/paper/list');
};

// 生命周期钩子
onMounted(() => {
  fetchSubjects();
});
</script>

<style scoped>
.rule-create-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header-title {
  margin-bottom: 20px;
}

.subtitle {
  color: #606266;
  font-size: 14px;
  margin-top: 5px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin: 30px 0 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  color: #409EFF;
}

.rule-form {
  max-width: 800px;
}

.question-type-setting {
  display: flex;
  align-items: center;
  gap: 8px;
}

.setting-label {
  margin: 0 5px;
}

.setting-multiply, .setting-equals {
  margin: 0 5px;
  color: #909399;
}

.setting-total {
  font-weight: bold;
  color: #409EFF;
}

.total-score {
  margin: 20px 0;
  font-size: 16px;
  font-weight: bold;
  text-align: right;
  color: #F56C6C;
}

.form-hint {
  margin-top: 10px;
  margin-left: 10px;
  color: #909399;
  font-size: 12px;
}

.alert-info {
  margin-bottom: 20px;
}

.form-actions {
  margin-top: 40px;
  text-align: right;
}

.empty-hint {
  color: #909399;
  font-style: italic;
  margin-top: 10px;
}

.result-alert {
  margin-bottom: 20px;
}

.generation-error {
  margin: 20px 0;
}

:deep(.el-checkbox-group) {
  display: flex;
  flex-wrap: wrap;
}

:deep(.el-checkbox) {
  margin-right: 30px;
  margin-bottom: 10px;
}
</style>